import styled from 'styled-components';
import {NavLink} from 'react-router-dom';
import React from 'react';
import Icon from './Icon';

const NavWrapper = styled.nav`
  background: white;
  line-height: 24px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  padding: 20px 0;
  font-size: 16px;
  text-align: center;
  > ul {
    display: flex;

    > li {
      width: 33.3333%;
      text-align: center;

      > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 600;
        .iconfont {
          font-weight: normal;
          font-size: 2rem;
        }

        &.selected {
          color: ${props => props.theme.main};
        }
      } 
    }
  }
  
  @media (max-height: 570px){
     &{
      padding: 10px 0;
      font-size: 6px;
       .iconfont {
          font: initial;
        }
      }
   }
`;


const Nav = () => {
  return (
    <NavWrapper>
      <ul>
        <li>
          <NavLink to="/money" activeClassName="selected">
            <Icon name="icon-money_1"/>
            记账
          </NavLink>
        </li>
        <li>
          <NavLink to="/tags" activeClassName="selected">
            <Icon name="icon-tianjia2"/>
            标签
          </NavLink>
        </li>
        <li>
          <NavLink to="/statistics" activeClassName="selected">
            <Icon name="icon-report"/>
            统计
          </NavLink>
        </li>
      </ul>
    </NavWrapper>
  );
};

export default Nav;
